<template>
  <div class="particle-container">
    <button class="btn btn-pink btn-bubbles">点击</button>
  </div>
</template>

<style lang="scss" scoped>
  @function sample($list) {
    @return nth($list, random(length($list)));
  }

  @function bubbles($color, $count:16) {
    $bubbles: ();
    $bubble-types: (radial-gradient(circle, $color 20%, transparent 20%),
        radial-gradient(circle, transparent 20%, $color 20%, transparent 30%));

    @for $i from 1 through $count {
      $bubbles: append($bubbles, sample($bubble-types), comma);
    }

    @return $bubbles;
  }

  @function random_range($min, $max) {
    $rand: random();
    $random_range: $min + floor($rand * (($max - $min) + 1));
    @return $random_range;
  }

  @function random_size($count:16) {
    $sizes: ();

    @for $i from 1 through $count {
      $sizes: append($sizes, (random_range(10, 20)*1%) (random_range(10, 20)*1%), comma);
    }

    @return $sizes;
  }

  .particle-container {
    display: flex;
    margin-top: 20px;
    justify-content: center;
    align-items: center;

    .btn {
      position: relative;
      overflow: hidden;
      outline: transparent;
      white-space: nowrap;
      $bg-color: #fe709f;
      $bg-color-dark: #fa588e;
      padding: 0.5em 1.0em;
      margin: 1em;
      font-size: 1.2em;
      line-height: 1.5;
      background: $bg-color;
      border-radius: 1.0em;
      border: 1px solid $bg-color;
      color: #fff;
      box-shadow:
        0 0.1px 0.7px rgba(233, 30, 99, 0.141),
        0 0.1px 1.7px rgba(233, 30, 99, 0.202),
        0 0.3px 3.1px rgba(233, 30, 99, 0.25),
        0 0.4px 5.6px rgba(233, 30, 99, 0.298),
        0 0.8px 10.4px rgba(233, 30, 99, 0.359),
        0 2px 25px rgba(233, 30, 99, 0.5);
      cursor: pointer;
      transition: 0.25s;

      &-bubbles {
        // 此处得是visible才能看见背景图片
        overflow: visible;
        transition: transform ease-in 0.1s, background-color ease-in 0.1s,
      box-shadow ease-in 0.25s;

        &::before {
          position: absolute;
          content: '';
          top: -2em;
          left: -2em;
          right: -2em;
          bottom: -2em;
          transition: ease-in-out 0.5s;
          background-repeat: no-repeat;
          background-image: bubbles($bg-color);
          background-size: random_size();
          background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
          animation: bubbles ease-in-out 0.75s forwards;
        }

        &:active {
          transform: scale(0.95);
          background: $bg-color-dark;

          &::before {
            animation: none;
            background-size: 0;
          }
        }
      }
    }
  }

  @keyframes bubbles {
    0% {
      background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    }

    50% {
      background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
        75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
        68% 96%, 95% 100%;
    }

    100% {
      background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
        100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
        100% 100%;
      background-size: 0% 0%;
    }
  }
</style>
